/*
░██████╗██╗░░░██╗███╗░░██╗
██╔════╝╚██╗░██╔╝████╗░██║
╚█████╗░░╚████╔╝░██╔██╗██║
░╚═══██╗░░╚██╔╝░░██║╚████║
██████╔╝░░░██║░░░██║░╚███║
╚═════╝░░░░╚═╝░░░╚═╝░░╚══╝

████████╗░█████╗░██╗░░██╗
╚══██╔══╝██╔══██╗╚██╗██╔╝
░░░██║░░░███████║░╚███╔╝░
░░░██║░░░██╔══██║░██╔██╗░
░░░██║░░░██║░░██║██╔╝╚██╗
░░░╚═╝░░░╚═╝░░╚═╝╚═╝░░╚═╝ */

/* The main css entry. Primarily used to import stuff */

@layer reset, base, utilities, layout, theme;

/* Import all css themes */
@import '../../styles/base.css';
@import '../../styles/variables.css';
@import '../../styles/utilities.css';
@import '../../styles/layout.css';
@import '../../styles/buttons.css';

/* FYI you have to use import-glob for all of these or else it gets mad */

/* Global Utilities */
.center {
	text-align: center;
}

html::view-transition-old() {
	animation-name: -ua-view-transition-fade-out;
}

html::view-transition-new() {
	animation-name: -ua-view-transition-fade-in;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.2s;
}

.table-container {
	overflow-x: auto;
	max-width: 100vw;
	outline: var(--tint-or-shade) solid 4px;
	margin: 1rem 0;
	border-radius: var(--brad);
}

table:not(.newsleter-output table) {
	border-collapse: collapse;
	position: relative;
	min-width: 100%;
	border: var(--border);
	background: var(--bg);
	font-size: var(--font-size-sm);
}

thead {
	top: 0;
	position: sticky;
	border: var(--border);
}

tr {
	border-bottom: solid 0.5px var(--tint-or-shade);
}

tr:hover {
	background: var(--tint-or-shade);
}

th {
	padding: 6px;
	text-align: left;
	background: var(--bg);
	color: var(--fg);
	font-variation-settings: var(--fw-400);
	font-size: var(--font-size-sm);
}

thead th + th {
	border-left: var(--border);
}

td {
	padding: 6px;
}

.td-full {
	grid-column: 1 / -1;
}
